<template>
	<view class="count">
		<view v-if="!showss" @click="goAddress" class="addressTop f f-a-c f-j-b  b-f b-r-30">
			<view class="left f f-a-c">
				<image src="/static/add.png" class="address" mode=""></image>
				<view class="huoAdd">
					请选择收货地址
				</view>
			</view>
			<image src="/static/youjian.png" class="youImg" mode=""></image>
		</view>
		<view v-else @click="goAddress" class="addressTop f f-a-c f-j-b  b-f b-r-30">
			<view class="leftName">
				<view class="name f f-a-c">
					<text>{{address.name}}</text> {{address.mobile}}
				</view>
				<view class="addressAdd">
					{{address.province}}{{address.city}}{{address.district}}{{address.detail}}
				</view>
			</view>
			<image src="/static/youjian.png" class="youImg" mode=""></image>
		</view>

		<view @click="showTime=true" v-if="type!=1" class="timeYu f f-a-c f-j-b">
			<view class="doorTime">
				{{type==2?'预约':'上门'}}时间
			</view>
			<view class="time f f-a-c">
				{{Defime}}
				<image src="/static/youjian.png" class="youImg" mode=""></image>
			</view>
		</view>
		<view class="shoop b-r-30">
			<view v-for="(item,index) in picObj.products" :key="index" class="shoopItem f f-a-c">
				<view class="imgBox">
					<image :src="item.cover" class="img" mode="aspectFill"></image>
				</view>
				<view class="rigText">
					<view class="rigTop">
						{{item.name}}
					</view>
					<view class="con">
						{{item.sku_name}}
					</view>
					<view class="pic f f-a-c f-j-b">
						<view class="pric">
							￥{{item.price}}
						</view>
						<view class="number">
							x{{item.num}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 优惠卷 -->
		<view class="DiscountCoupon b-r-30">
			<view class="youHui f f-a-c f-j-b">
				<view class="le">
					优惠卷
				</view>
				<view @click="show=true" class="numPric f f-a-c">
					{{rollItem&&rollItem.value?'已抵扣'+rollItem.value+'元':'请选择'}}
					<image src="/static/youjian.png" class="youImg" mode=""></image>
				</view>
			</view>
			<view class="xian">

			</view>
			<view class="youHui f f-a-c f-j-b">
				<view class="le">
					积分抵扣 <text>({{picObj.score}}积分)</text>
				</view>
				<view class="numPrics f f-a-c">
					可抵扣 <text>{{picObj.deduction}}元</text>
					<view @click="satteShow" class="imgs f f-a-c">
						<image src="/static/show2.png" v-if="satte" class="state" mode=""></image>
						<image src="/static/show1.png" v-else class="state" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 金额 -->
		<view class="Amount b-r-30">
			<view class="tops f f-a-c f-j-b">
				<view class="lefts">
					总金额
				</view>
				<view class="rights">
					¥{{picObj.total}}
				</view>
			</view>
			<view v-if="picObj.discount" class="tops f f-a-c f-j-b m-t-20 m-b-20">
				<view class="lefts">
					优惠金额
				</view>
				<view class="rightsPic">
					-¥{{picObj.discount||'0'}}
				</view>
			</view>
			<view class="tops f f-a-c f-j-b">
				<view class="lefts">
					实付金额
				</view>
				<view class="rights">
					¥{{picObj.amount||'--'}}
				</view>
			</view>
		</view>
		<view class="botBtn">
			<view class="bttn f f-a-c f-j-b">
				<view class="lef">
					<text>实付</text> ¥{{picObj.amount||'--'}}
				</view>
				<view v-if="address&&address.id" @click="comfig" class="rig">
					提交订单
				</view>
				<view v-else class="rigs">
					提交订单
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="30">
			<view class="detils p-30">
				<view class="topName f f-a-c f-j-b">
					<view class="lefName">
						选择优惠卷({{rollList.length}})
					</view>
					<image src="/static/Frame@2x(15).png" @click="show=false" class="x" mode=""></image>
				</view>
				<view v-if="rollList.length==0" class="zanwu f f-a-c f-j-c f-d-c">
					<image src="/static/rollZan.png" class="rollZan" mode=""></image>
					<view class="none">
						暂时还没有卷哦
					</view>
				</view>
				<view v-else class="bodyList">
					<view v-for="(item,index) in rollList" :key="index" @click="tabsQie(item,index)" class="listItem">
						<image src="/static/bg2.png" v-if="static==index" class="bg" mode=""></image>
						<image src="/static/bg1.png" class="bg" v-else mode=""></image>
						<view class="content f f-a-c">
							<view class="pric f f-a-c">
								￥<text>{{item.value}}</text>
							</view>
							<view class="untils">
								<view class="until">
									{{item.type==1?'抵扣券':''}}
								</view>
								<view class="time">
									有效期至 {{$u.timeFormat(item.expired_at, 'yyyy-mm-dd')}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view @click="comfigQue" class="btnCom">
					确定
				</view>
			</view>
		</u-popup>
		<u-picker v-model="showTime" @confirm="confirmFn" :params="params" :default-time="Defime"
			mode="time"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showTime: false,
				static: -1,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				yuTime: +new Date() + 6000000,
				Defime: '',
				rollItem: {},
				rollList: [{
					show: false
				}, {
					show: false
				}, {
					show: false
				}, {
					show: false
				}, {
					show: false
				}, {
					show: false
				}, {
					show: false
				}],
				roll: '请选择',
				address: {},
				satte: false,
				show: false,
				address: {},
				showss: false,
				num: 0,
				price: [],
				picObj: {},
				type: 0,
			}
		},
		onShow() {
			this.address = uni.getStorageSync('address')
			if (this.address) {
				this.showss = true
			} else {
				this.showss = false
			}
			this.Defime = this.$u.timeFormat(this.yuTime, 'yyyy-mm-dd hh:MM:ss')
		},
		onLoad(options) {
			this.type = options.type
			this.num = options.num
			this.price = JSON.parse(options.price || '')
			this.comfigOrder()
			this.initDiscount()
		},
		methods: {
			// /选择时间
			confirmFn(e) {
				console.log(e, '4444444');
				this.Defime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
			},
			// 确认订单
			async comfigOrder() {
				let n = await this.$api.confirmOrder({
					address_id: this.address.id || '',
					coupon_id: this.rollItem.id || '',
					use_score: this.satte,
					prices: this.price,
					scheduled_at: this.$u.timeFormat(this.yuTime, 'yyyy-mm-dd hh:MM:ss')
				})
				this.picObj = n.data
			},
			// 选择优惠卷确认
			comfigQue() {
				this.show = false
				this.comfigOrder()
			},
			// 优惠卷列表listDiscountPapers
			async initDiscount() {
				let n = await this.$api.listDiscountPapers({
					status: 1
				})
				console.log(n, '111111111111111');
				n.data.forEach((item, index) => {
					item.show = false
				})
				this.rollList = n.data
			},
			tabsQie(item, index) {
				this.static = index
				this.rollItem = item
			},
			// 提交订单
			async comfig() {
				let n = await this.$api.submitOrder({
					address_id: this.address.id || '',
					coupon_id: this.rollItem.id || '',
					use_score: this.satte,
					prices: this.price,
					scheduled_at: this.Defime
				})
				let res = await this.$api.payOrder({
					id: n.data.id
				})
				// this.$msg(n.msg)
				if (res.code == 200) {
					wx.requestPayment({
						//成功之后，调用小程序微信支付
						timeStamp: res.data.pay_info.timeStamp,
						nonceStr: res.data.pay_info.nonceStr,
						package: res.data.pay_info.packageValue,
						signType: res.data.pay_info.signType,
						paySign: res.data.pay_info.paySign,
						success: async ress => {
							this.$msg('支付成功！')
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/my/index'
								})
							}, 1000)
						},
						fail: (flires) => {
							console.log(flires, '898989898989889');
							this.$msg('支付失败！')
						}
					})
				} else {
					this.$msg(res.msg)
				}
				// 下完单之后
			},
			goAddress() {
				uni.navigateTo({
					url: '/pages/shoop/ReceivingAddress'
				})
			},
			satteShow() {
				this.satte = !this.satte
				this.comfigOrder()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bodyList {
		height: 700rpx;
		width: 100%;
		padding: 30rpx 0;
		overflow-y: auto;
		margin: 30rpx 0;

		.listItem {
			position: relative;
			width: 100%;
			height: 162rpx;
			margin-bottom: 20rpx;

			.content {
				position: relative;
				height: 100%;
				padding-left: 53rpx;
				z-index: 1;

				.untils {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-500;
					font-weight: 600;
					color: #2f2319;
					margin-left: 120rpx;
				}

				.time {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					color: #ada6a0;
					margin-top: 10rpx;
				}

				.pric {
					font-size: 32rpx;
					font-family: HarmonyOS Sans, HarmonyOS Sans-500;
					font-weight: 600;
					color: #977961;

					text {
						font-size: 64rpx;
						font-family: HarmonyOS Sans, HarmonyOS Sans-700;
						font-weight: 700;
						color: #977961;
						margin-top: 15rpx;
					}
				}
			}

			.bg {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				// z-index: -1;
			}
		}
	}

	.btnCom {
		width: 90%;
		margin: 0 auto;
		height: 96rpx;
		line-height: 95rpx;
		background: #977961;
		border-radius: 48rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-500;
		font-weight: 500;
		text-align: center;
		color: #ffffff;
	}

	.zanwu {
		margin-bottom: 60rpx;
		margin-top: 100rpx;

		.rollZan {
			width: 242rpx;
			height: 200rpx;
		}

		.none {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			text-align: LEFT;
			color: #ada6a0;
			margin-top: 15rpx;
		}
	}

	.topName {
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-500;
		font-weight: 600;
		text-align: LEFT;
		color: #2f2319;
	}

	.x {
		width: 48rpx;
		height: 48rpx;
	}

	.detils {
		background-color: #f7f6f2;
	}

	.botBtn {
		position: fixed;
		bottom: 0;
		height: 150rpx;
		width: 100%;
		background: #fffefc;
		padding-top: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;

		.bttn {
			width: 100%;
			height: 88rpx;

			.rig {
				width: 240rpx;
				height: 88rpx;
				line-height: 85rpx;
				background: #977961;
				border-radius: 44rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: center;
				color: #ffffff;
			}

			.rigs {
				width: 240rpx;
				height: 88rpx;
				line-height: 85rpx;
				background: #ebe2da;
				border-radius: 44rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: center;
				color: #ffffff;
			}

			.lef {
				font-size: 40rpx;
				font-family: HarmonyOS Sans, HarmonyOS Sans-700;
				font-weight: 700;
				text-align: LEFT;
				color: #977961;

				text {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-500;
					font-weight: 600;
					text-align: LEFT;
					color: #2f2319;
					margin-right: 10rpx;
				}
			}
		}
	}

	.Amount {
		width: 90%;
		margin: 0 auto;
		padding: 40rpx 30rpx;
		background: #fffefc;
		margin-top: 25rpx;

		.tops {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 600;
			text-align: LEFT;
			color: #2f2319;

			.rightsPic {
				font-size: 28rpx;
				font-family: HarmonyOS Sans, HarmonyOS Sans-400;
				font-weight: 600;
				text-align: LEFT;
				color: #977961;
			}
		}
	}

	.DiscountCoupon {
		width: 90%;
		margin: 0 auto;
		padding: 40rpx 30rpx;
		background: #fffefc;
		margin-top: 25rpx;

		.xian {
			width: 100%;
			height: 2rpx;
			background-color: #f2efec;
			margin: 30rpx 0;
		}

		.youHui {
			.le {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: LEFT;
				color: #2f2319;

				text {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					text-align: LEFT;
					color: #ada6a0;
					margin-left: 20rpx;
				}
			}

			.numPrics {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: #ada6a0;

				text {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					text-align: LEFT;
					color: #2f2319;
				}

				.imgs {
					width: 32rpx;
					height: 32rpx;
					margin-left: 20rpx;

					.state {
						width: 100%;
						height: 100%;
					}
				}
			}

			.numPric {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: #977961;

				.youImg {
					width: 16rpx;
					height: 24rpx;
					margin-left: 15rpx;
				}
			}
		}
	}

	.shoop {
		width: 90%;
		margin: 0 auto;
		padding: 40rpx 30rpx;
		background: #fffefc;
		margin-top: 25rpx;

		.shoopItem {
			margin-bottom: 20rpx;

			.rigText {
				width: 70%;

				.pic {
					.number {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-400;
						font-weight: 400;
						text-align: LEFT;
						color: #ada6a0;
					}

					.pric {
						font-family: 'HarmonyOS Sans Bold';
						color: #2f2319;
						font-weight: 700;
						font-size: 28rpx;
					}
				}

				.con {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					text-align: LEFT;
					color: #ada6a0;
					margin-top: 15rpx;
					margin-bottom: 20rpx;
				}

				.rigTop {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					text-align: LEFT;
					color: #2f2319;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					margin-bottom: 10rpx;
					box-sizing: border-box;
				}
			}

			.imgBox {
				width: 160rpx;
				height: 160rpx;
				background: #ffffff;
				border-radius: 8rpx;
				overflow: hidden;
				margin-right: 20rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.addressTop {
		width: 90%;
		margin: 0 auto;
		padding: 40rpx 30rpx;

		.leftName {
			width: 85%;

			.name {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: LEFT;
				color: #2f2319;

				text {
					margin-right: 20rpx;
				}
			}

			.addressAdd {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: #6a5f55;
				margin-top: 10rpx;
			}
		}

		.youImg {
			width: 16rpx;
			height: 24rpx;
		}

		.left {
			.address {
				width: 48rpx;
				height: 48rpx;
				margin-right: 25rpx;
			}

			.huoAdd {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: LEFT;
				color: #2f2319;
			}
		}

		.youImg {
			width: 16rpx;
			height: 24rpx;
		}
	}

	.count {
		height: 100vh;
		width: 100%;
		background-color: #f7f6f2;
		padding-bottom: 170rpx;
		padding-top: 30rpx;
		overflow-y: auto;
	}

	.timeYu {
		width: 90%;
		margin: 24rpx auto;
		padding: 32rpx;
		height: 108rpx;
		background: #fffefc;
		border-radius: 24rpx;

		.doorTime {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 600;
			text-align: LEFT;
			color: #2f2319;
		}

		.time {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			text-align: LEFT;
			color: #b3a089;

			image {
				width: 16rpx;
				height: 24rpx;
				margin-left: 16rpx;
			}
		}
	}
</style>